<script type="text/jsx">
  import { addPayType } from "../api/my";
  import { uploadImage } from "../api";

  export default {
    name: "add-payType-page",
    data:function() {
      return {
        abc: '123',
        formItems: {
          type: this.$f7route.query.type, // 123   1银行卡 2支付宝 3微信
          name: '', // 姓名
          bank: undefined, //  开户行
          number: '', // 银行卡号
          bank_address: undefined, // 开户行地址
          image: undefined // 收款二维码
        }
      }
    },
    computed: {
      title() {
        switch (this.$f7route.query.type) {
          case '1': return this.$t('m.bank');
          case '2': return this.$t('m.alipay');
          case '3': return this.$t('m.wechat');
          case '4': return 'PayPal';
        }
      },
      type() {
        return this.$f7route.query.type
      }
    },
    render(h, context) {
      let inputEl = (
        <div>
          <input type="file" onChange={this.uploadPic}/>
          <div class="image-box">
            <img src={this.formItems.image}/>
          </div>
        </div>
      );
      let nameEl = (
        <f7-list-input value={this.formItems.name} onInput={($event) => this.formItems.name = $event.target.value} label={this.$t('m.apt1')} placeholder={this.$t('m.apt2')}></f7-list-input>
      );
      let accountEl = (
        <f7-list-input value={this.formItems.number} onInput={($event) => this.formItems.number = $event.target.value} label={this.$t('m.apt3')} placeholder={this.$t('m.apt4', {name: this.type === '2'?this.$t('m.alipay'):this.$t('m.wechat')})}></f7-list-input>
      );
      var temps = [
        (
          <f7-list>
            {nameEl}
            <f7-list-input value={this.formItems.number} onInput={($event) => this.formItems.number = $event.target.value} label={this.$t('m.apt5')} placeholder={this.$t('m.apt6')}></f7-list-input>
            <f7-list-input value={this.formItems.bank} onInput={($event) => this.formItems.bank = $event.target.value} label={this.$t('m.apt7')} placeholder={this.$t('m.apt8')}></f7-list-input>
            <f7-list-input value={this.formItems.bank_address} onInput={($event) => this.formItems.bank_address = $event.target.value} label={this.$t('m.apt9')} placeholder={this.$t('m.apt10')}></f7-list-input>
          </f7-list>
        ),
        (
          <f7-list class="has-upload-img">
            {nameEl}
            {accountEl}
            <p>{this.$t('m.apt11')}</p>
            {inputEl}
          </f7-list>
        ),
        (
          <f7-list class="has-upload-img">
            {nameEl}
            {accountEl}
            <p>{this.$t('m.apt11')}</p>
            {inputEl}
          </f7-list>
        )
      ];
      return (
        <f7-page class="bg-color-white">
          <f7-navbar title={this.$t('m.apt12')+this.title} back-link=" "></f7-navbar>
          {temps[parseInt(this.type)-1]}
          <div class="content-padding">
            <f7-button fill color="blue" large onClick={this.handleAdd}>{this.$t('m.sure')}</f7-button>
          </div>
        </f7-page>
      )
    },
    methods: {
      uploadPic(e) {
        const file = e.target.files[0];
        const render = new FileReader();
        render.readAsDataURL(file);
        render.onload = (res) => {
          uploadImage({image: res.target.result}).then(res => {
            this.formItems.image = res.url.url;
            e.value = '';
          })
        }
      },
      handleAdd() {
        addPayType(this.formItems).then(() => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: 50px;
  }
  .has-upload-img {
    p {
      padding: $padding20 $padding;
      font-size: 20px!important;
      color: $mainColor2;
    }
    > div {
      margin: 0 $padding;
      width: 150px;
      height: 150px;
      border: 2px solid $mainColor2;
      position: relative;
      background: #f6f7fb;
      &:before {
        width: 50px;
        height: 2px;
        background: $colorGrey;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
      &:after {
        width: 2px;
        height: 50px;
        background: $colorGrey;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
      input {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
      }
      .image-box{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index:2;
        overflow: hidden;
      }
    }

  }
</style>
